<template>
  <div class="test-token">
    <el-card>
      <template #header>
        <span>Token测试页面</span>
      </template>
      
      <el-form label-width="120px">
        <el-form-item label="当前Token">
          <el-input v-model="currentToken" readonly />
        </el-form-item>
        
        <el-form-item label="用户名">
          <el-input v-model="username" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="testGetAvatar">测试获取头像</el-button>
          <el-button @click="testToken">测试Token</el-button>
          <el-button @click="clearToken">清除Token</el-button>
        </el-form-item>
        
        <el-form-item label="测试结果">
          <el-input v-model="testResult" type="textarea" :rows="5" readonly />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/utils/request'

const currentToken = ref(localStorage.getItem('token') || '')
const username = ref('admin')
const testResult = ref('')

const testGetAvatar = async () => {
  try {
    testResult.value = '正在测试获取头像...\n'
    const response = await request.get('/user/getAvatar', {
      params: { username: username.value }
    })
    testResult.value += `成功: ${JSON.stringify(response.data, null, 2)}`
  } catch (error) {
    testResult.value += `失败: ${error.message}\n`
    testResult.value += `状态码: ${error.response?.status}\n`
    testResult.value += `响应: ${JSON.stringify(error.response?.data, null, 2)}`
  }
}

const testToken = () => {
  const token = localStorage.getItem('token')
  testResult.value = `Token: ${token}\n`
  testResult.value += `Token长度: ${token?.length || 0}\n`
  testResult.value += `是否为空: ${!token}\n`
}

const clearToken = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('username')
  currentToken.value = ''
  testResult.value = 'Token已清除'
}
</script>

<style scoped>
.test-token {
  padding: 20px;
}
</style> 